<template>
  <div>
    <!-- -->
    <van-nav-bar title="萌宠收藏">
      <template #right>
        <!-- <van-icon name="search" size="20" /> -->
      </template>
    </van-nav-bar>
    <!--  -->
    <div v-if="CollectiblePetsData.length > 0">
      <van-swipe-cell v-for="(item, index) in CollectiblePetsData" :key="item.id">
        <van-card :desc="item.desc" :title="item.name" class="goods-card" :thumb="item.coverURL"
          @click="toinfo(item.id)" />
        <template #right>
          <van-button square text="取消收藏" type="danger" class="delete-button" @click="likeDelete(index)" />
        </template>
      </van-swipe-cell>
    </div>
    <!-- @click="likeDelete" -->
    <div v-else>
      <van-empty class="custom-image" image="https://imgs.qiubiaoqing.com/qiubiaoqing/imgs/62d45cdc270fbOUI.gif"
        description="您还没有收藏的萌宠，快去收藏吧！" />
    </div>
    <!-- <button @click="click"></button> -->
  </div>
</template>

<script>
import localforage from 'localforage';
export default {
  name: 'Vue2Like',

  data() {
    return {
      CollectiblePetsData: []
    };
  },

  mounted() {

  },
  //Vue实例的数据观测和事件配置已完成，但尚未挂载到DOM上。通常在这个阶段执行一些数据初始化、事件监听、异步请求等逻辑，但不涉及DOM操作。
  created() {
    localforage.getItem('loginStatus').then((status) => {
      if (status === null || status === false) {
        this.$toast({
          message: '您未登录！',
          // icon: '../../assets/maomao.png',
          icon: 'https://imgs.qiubiaoqing.com/qiubiaoqing/imgs/62d45cdc270fbOUI.gif',
          // icon: '@/assets/img/maomao.png',
        });
        this.$router.replace("/Login");
      }

    });
    // this.getCollectiblePetsData()
    localforage.getItem('CollectiblePets').then((favorites) => {
      if (!favorites) {
        // 如果没有CollectiblePets，则创建一个空数组
        localforage.setItem('CollectiblePets', []).then(() => {
          this.getCollectiblePetsData();
        });
      } else {
        this.getCollectiblePetsData();
      }
    });
  },
  methods: {
    toinfo(goodid) {
      //页面跳转并携带id参数
      this.$router.push("/goodinfo?goodid=" + goodid);
    },
    //获取用户登录id匹配收藏数据
    getCollectiblePetsData() {
      localforage.getItem('currentUser').then((res) => {
        localforage.getItem('CollectiblePets').then((favorites) => {
          for (let i = 0; i < favorites.length; i++) {
            if (favorites[i].userId === res.id) {
              // console.log(favorites[i].collection);
              this.CollectiblePetsData.push(favorites[i].collection);
              // console.log(this.CollectiblePetsData);// 将收藏的数据推送至CollectiblePetsData数组中
            }
          }
        });
      }).catch((err) => {
        // 处理获取用户ID失败的情况
        console.log(err);
      });
    },
    // click() {
    //   console.log(this.CollectiblePetsData.length);
    // },
    // likeDelete(index) {
    //   localforage.getItem('CollectiblePets').then((favorites) => {
    //     favorites.splice(index, 1);
    //     localforage.setItem('CollectiblePets', favorites).then(() => {
    //       // 成功更新数据后的操作
    //       console.log('成功删除指定索引处的数据');
    //       this.CollectiblePetsData = []; // 清空收藏数据
    //       this.getCollectiblePetsData(); // 重新获取收藏数据
    //     }).catch((err) => {
    //       // 更新数据失败后的处理
    //       console.error('更新数据失败', err);
    //     });
    //   }).catch((err) => {
    //     // 获取数据失败后的处理
    //     console.error('获取数据失败', err);
    //   });
    // }
    likeDelete(index) {
      localforage.getItem('CollectiblePets').then((favorites) => {
        favorites.splice(index, 1);  // 删除指定索引处的项
        localforage.setItem('CollectiblePets', favorites).then(() => {
          // 成功更新数据后的操作
          console.log('成功删除指定索引处的数据');
          this.CollectiblePetsData.splice(index, 1);  // 删除视图中对应的项
        }).catch((err) => {
          // 更新数据失败后的处理
          console.error('更新数据失败', err);
        });
      }).catch((err) => {
        // 获取数据失败后的处理
        console.error('获取数据失败', err);
      });
    }
  },
};
</script>
<style scoped>
.van-nav-bar.van-hairline--bottom {
  background-image: linear-gradient(278deg, #fff1eb 0%, #ace0f9 100%);
}

.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.van-card__content {
  display: flex;
  justify-content: space-around;
}

.van-card__title.van-multi-ellipsis--l2 {
  max-height: none;
  font-size: 5vw;
  line-height: 1;
}

.van-card__desc.van-ellipsis {
  font-size: 4vw;
  line-height: 2;
  max-height: none;
}

.van-sidebar {
  width: 20vw;
  font-size: 6vw;
}

.van-sidebar-item__text {
  font-size: 4vw;
}

.van-sidebar-item--select::before {
  height: 6vw;
  width: 1vw;
}

.van-image {
  height: 8vw;
}

:deep(.van-image) img {
  border-radius: 2vw;
}

.van-card__thumb {
  width: 32vw;
  height: 100%;
}


.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
</style>